<!DOCTYPE html>
<html>
<head>
<title>lianxi3</title>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
#box{
    height:200px;
    width:200px;
    margin:50px 0 0 50px;
    display:flex;
    flex-wrap: wrap;
}
button{
    display:block;
    width:20px;
    height:20px;
    margin:0;
    padding:0;
    border:1px solid rgba(0,0,0,0.2);
    cursor:pointer;
}
</style>
</head>
<body>
<div id="box">
    </div>

    <script type="text/javascript">
//获取页面包含根节点
var box = document.querySelector('#box');
//循环创建一百个按钮，添加到根组件中
for( var i=0;i<100;i++){
    var btn = document.createElement('button');
    box.append(btn);
}
//获取到按钮数组，循环添加点击事件，实现颜色变化
var aBtn = document.querySelectorAll('button');
for(var i=0;i<aBtn.length;i++){
    aBtn[i].index = i;
    aBtn[i].onclick=function(){
        clearColor(aBtn);
        this.style.backgroundColor = 'blue';
        bianjie(this.index)
    }
}
//清空所有按钮的颜色值
function clearColor(aBtn){
    for(var i=0; i<aBtn.length; i++){
        aBtn[i].style.backgroundColor="";
    }
}
//判断存在那条边界上
function isBianjie(arr,index){
    for(var i=0; i<arr.length; i++){
        if(arr[i] === index) return true;
    }
    return false;
}
//改变边界颜色
function xiabiao(aBtn,arr,index){
    for(var i=0; i<arr.length; i++){
        aBtn[index+arr[i]].style.backgroundColor = 'red';
    }
}
//边界按钮样式的具体渲染
function bianjie(newIndex){
    var arr =[1,2,3,4,5,6,7,8,10,20,30,40,50,60,70,80,91,92,93,94,95,96,97,98,19,29,39,49,59,69,79,89,0,9,90,99];
    var arrTop = [1,2,3,4,5,6,7,8];
    var arrLeft = [10,20,30,40,50,60,70,80];
    var arrBottom = [91,92,93,94,95,96,97,98];
    var arrRight=[19,29,39,49,59,69,79,89];
    //中间
    if(!isBianjie(arr,newIndex)){
        xiabiao(aBtn,[-10,-11,-9,1,-1,10,11,9],newIndex);
    }
    //左上角
    if(newIndex === 0){
        xiabiao(aBtn,[10,11,1],newIndex);
    }
    //右上角
    if(newIndex === 9){
        xiabiao(aBtn,[10,9,-1],newIndex);
    }
    //左下角
    if(newIndex === 90){
        xiabiao(aBtn,[-10,-9,1],newIndex);
    }
    //右下角
    if(newIndex === 99){
        xiabiao(aBtn,[-10,-11,-1],newIndex);
    }
    //上中
    if(isBianjie(arrTop,newIndex)){
        xiabiao(aBtn,[10,11,-1,1,9],newIndex);
    }
    //左中
    if(isBianjie(arrLeft,newIndex)){
        xiabiao(aBtn,[10,-10,11,1,-9],newIndex);
    }
    //下中
    if(isBianjie(arrBottom,newIndex)){
        xiabiao(aBtn,[-10,-11,-9,-1,1],newIndex);
    }
    //右中
    if(isBianjie(arrRight,newIndex)){
        xiabiao(aBtn,[-10,10,-11,-1,9],newIndex);
    }
}
</script>
</body>
</html>